<template>
  <div class="content">
    <div class="banner">
      <!-- 轮播图 -->
      <div class="uni-padding-wrap">
        <div class="page-section swiper">
          <div class="page-section-spacing">
            <swiper
              class="swiper"
              :indicator-dots="indicatorDots"
              :autoplay="autoplay"
              :interval="interval"
              :duration="duration"
            >
              <swiper-item
                v-for="(item, i) in imgs"
                :key="i"
                class="swiperItem"
              >
                <div class="swiper-item uni-bg-green">
                  <img class="swiperimg" :src="item" alt />
                </div>
              </swiper-item>
            </swiper>
          </div>
        </div>
      </div>
    </div>
    <div class="title">
      <div class="tit-wrap">
        <div class="prod-tit">{{ prodlist.prodName }}</div>
        <div class="col" @click="storeups()">
          <img  :src="flag==true?'../../static/images/icon/prod-col.png':'../../static/images/icon/prod-col-red.png'" alt />
          收藏
        </div>
      </div>
      <div class="sales-p">{{ prodlist.brief }}</div>
      <div class="prod-price">
        <div class="price">
          ￥
          <span class="price_num">{{ prodlist.price }}</span>
        </div>
        <div class="sales"></div>
      </div>
    </div>
    <div class="sku">
      <div class="sku_inset">
        <div class="sku_kit">已选</div>
        <div class="sku_con">{{ selectSku.join(",") }},{{ num }}件</div>
        <div class="sku_more" @click="addBuycarClick">...</div>
      </div>
    </div>

    <div class="cmt-wrap">
      <div class="cmt-tit" @click="selection(index)">
        <div class="cmt-t">
          评价
          <span class="cmt-good">好评0%</span>
        </div>
        <div class="cmt-count">
          共0条
          <div class="cmt-more"></div>
        </div>
      </div>
      <div class="cmt-cont">
        <div class="cmt-tag">
          <span @click="selection" v-for="(item,index) in toplist" :key="index" :class="ind===index?'on':''">{{item.text}}</span>
        </div>
        <div class="cmt-items"></div>
      </div>
    </div>
    <div class="detail">
      <div>
        <rich-text class="richtext" :nodes="prodlists"></rich-text>
      </div>
    </div>
    <div class="footerPin"></div>
    <div class="footer">
      <div class="onebtn" @click="handleKefu">
        <div>
          <van-icon size="25" name="service-o" />
        </div>客服
      </div>
      <div class="twobtn" @click="handleAway">
        <div>
          <van-icon size="25" name="cart-o" info="9" />
        </div>购物车
      </div>
      <div class="threebtn" @click="addBuycarClick">加入购物车</div>
      <div class="fourbtn" @click="toBut(e)">立即购买</div>
    </div>
    <!-- 已选 -->

    <!-- 评价 -->
    <div v-if="selectionFlag" class="cmt-popup">
      <div class="cmt-tit">
        <div class="cmt-t">
          商品评价
          <span class="cmt-good">好评度0%</span>
        </div>
        <span class="close" @click="selection()">X</span>
      </div>
      <div class="cmt-cont">
        <div class="cmt-tag">
          <span
            @click="countss(index)"
            :class="{ active: index === creatIndex }"
            v-for="(item, index) in toplist"
            :key="index"
          >{{ item.text }}</span>
        </div>
        <div class="cmt-items"></div>
      </div>
    </div>

    <!-- 弹层 -->
    <div v-if="showSkuSelect" class="buycar">
      <van-popup
        :show="showSkuSelect"
        position="bottom"
        @close="showSkuSelect = false"
      >
        <div class="skuCard">
          <img :src="prodlist.pic" alt="" class="shopPrev" />
          <div class="skuPrice">
            <p v-if="selectProd.stocks">
              ￥<span>{{ selectProd.price }}</span
              >.00 
            </p>
            <p v-else>无货</p>
            <p>
              <span
                :style="{
                  color: '#999',
                  fontSize: '24rpx',
                  marginRight: '15rpx',
                }"
                >已选</span
              ><span :style="{ fontSize: '24rpx', color: '#333' }"
                >{{ selectSku.join(",") }},{{ num }}件</span
              >
            </p>
          </div>
          <div @click="handleClickClose" class="closeDiv">x</div>
        </div>
        <div class="goSku">
          <section class="skuList" v-if="selectSku[0]">
            <li class="sku-item" v-for="(item, index) in sku" :key="index">
              <p >{{ index }}</p>
              <div>
                <button
                  @click="
                    changeSelect(
                      index,
                      value,
                      !availableSku[index].includes(value)
                    )
                  "
                  :class="{
                    disable: !availableSku[index].includes(value),
                    active: selectSku.includes(value),
                  }"
                  v-for="(value, key) in item"
                  :key="key"
                >
                  {{ value }}
                </button>
              </div>
            </li>
          </section>
          <div class="skuCount">
            <span>数量</span>
            <p>
              <span @click="handleDown">-</span>
              <span style="color:'#000'">{{ numChoice }}</span>
              <span @click="handleUp">+</span>
            </p>
          </div>
          <div class="skuAddbuycar">
            <span @click="handleClickAddBuycar" >加入购物车</span>
            <span @click="toBut(e)">立即购买</span>
          </div>
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState,mapMutations } from "vuex";
export default {
  data() {
    return {
      imgs: [],
      count: 0,
      ind:0,
      toplist: [
        { text: "全部(0)" },
        { text: "好评(0)" },
        { text: "中评(0)" },
        { text: "差评(0)" },
        { text: "有图(0)" }
      ],
      prodlists: "",
      flag: false, //收藏状态
      uid: "",
      selectionFlag: false,
      background: ["color1", "color2", "color3"],
      indicatorDots: true,
      autoplay: true,
      interval: 2000,
      duration: 500,
      showSku: false,
      numChoice: 1,
      basketId: 0,
      // sku
      info: {},
      sku: {}, // 所有可供选择的sku选项
      selectSku: [], // 当前选中的sku选项
      availableSku: {}, // 有库存的sku选项
      num: 1,
      showSkuSelect: false,
      isDisabled: false,
      buyObj:{}
    };
  },  
  methods: {
    ...mapActions({
      prodobj: "prod/prodobj",
      storeup: "prod/storeup",
      addBuycar: "prod/addBuycar",
    }),
    ...mapMutations('prod',['getCreatIndex']),
    // 收藏
    storeups() {
      this.flag = !this.flag;
      let id=this.$mp.query.detailsId
      if (this.flag === true) {
        // this.storeup(this.uid);
      }
    },

    selection(index) {
      this.selectionFlag = !this.selectionFlag;
      this.ind = index;
    },
    // 高亮
    countss(index) {
      console.log(index);
      this.getCreatIndex(index);
    },
    // 客服
    handleKefu() {
      uni.showModal({
        title: "模拟进入客服会话",
        content: "开发者工具暂不支持打开客服会话，请使用真机调适",
        success: function(res) {
          if (res.confirm) {
            console.log("确定");
          } else if (res.cancel) {
            console.log("返回");
          }
        }
      });
    },
    // 跳转购物车
    handleAway() {
      uni.switchTab({
        url: "/pages/basket/index",
      });
    },
    // 加入购物车
    addBuycarClick() {
      this.showSkuSelect = true;
    },
    // 关闭购物车数量弹窗
    handleClickClose() {
      this.showSkuSelect = false;
    },
    // 减少数量
    handleDown() {
      if (this.numChoice >= 2) {
        this.numChoice = this.numChoice - 1;
      }
    },
    // 增加数量
    handleUp() {
      this.numChoice = this.numChoice + 1;
    },
    // 加入购物车
    handleClickAddBuycar() {
      this.addBuycar({
        basketId: 0,
        count: this.numChoice,
        prodId: this.info.prodId,
        shopId: this.info.shopId,
        skuId: this.selectProd.skuId,
      });
    },
    // sku
    changeSelect(index, value, disable) {
      let keys = Object.keys(this.sku),
        selectSku = [...this.selectSku];
      index = keys.findIndex((item) => item === index);
      selectSku[index] = value;
      this.selectSku = selectSku;
      this.isDisabled = disable;
    },
    toBut(e){
      wx.setStorageSync("orderItem", JSON.stringify({
      prodId: this.info.prodId,
      skuId:  this.selectProd.skuId,
      prodCount: this.numChoice,
      shopId: this.info.shopId
    }));
        wx.navigateTo({
          url: `/pages/submit-order/index?orderEntry=1`,
        });
    }
  },

  onLoad(option) {
    this.prodobj(option.detailsId);
  },

  computed: {
    ...mapState("prod", ["prodlist"]),
     selectProd() {
      if (this.info.skuList) {
        let result = this.info.skuList.filter((item) => {
          return item.skuName.trim() === this.selectSku.join(" ");
        });
        return result.length ? result[0] : {};
      }
      return {};
    },
  },
  watch: {
    prodlist: {
      deep: true,
      // immediate: true,
      handler(newVal, oldVal) {
        this.info = newVal;
        // 轮播
        this.imgs = newVal.imgs.split(",");
        // 富文本
        this.prodlists = newVal.content
          .replace(
            /(\<img class=\"\" style=\")/g,
            "$1max-width:100% !important;height: auto !important;"
          )
          .replace(/width=\"750\"/g, "width='100%'").replace(/width=\"760\" height=\"/g, "width='100%'").replace(/width=\"790\" height=\"/g, "width='100%'").replace(/height=\"/,'');
        // uid
        this.uid = newVal.prodId;
        // sku
        this.id = newVal.prodId;
        let result = newVal;

        // 计算sku
        let sku = {},
          selectSku = [];
        result.skuList.forEach((item) => {
          let properties = item.properties.split(";");
          properties.forEach((value) => {
            let temp = value.split(":");
            // 如果存在属性，进行push
            if (sku[temp[0]]) {
              sku[temp[0]].push(temp[1]);
            } else {
              // 如果不存在则进行赋值，属性值是
              sku[temp[0]] = [temp[1]];
            }
          });
        });
        for (let key in sku) {
          sku[key] = [...new Set(sku[key])];
          selectSku.push(sku[key][0]);
        }
        console.log(sku, selectSku, "selectSku...");
        this.sku = sku;
        this.selectSku = selectSku;
      },
    },
    selectSku() {
      let availableSku = {};
      let keys = Object.keys(this.sku);
      for (let key in this.sku) {
        let index = keys.findIndex((item) => item === key);
        let properties = [...this.selectSku];
        availableSku[key] = this.sku[key].filter((item) => {
          properties[index] = item;
          let properStr = "";
          for (let i = 0; i < keys.length; i++) {
            properStr += `${keys[i]}:${properties[i]};`;
          }
          let availableSkuStocks = this.info.skuList.filter(
            (item) => item.properties === properStr.slice(0, -1)
          ).length;
          return availableSkuStocks;
        });
      }
      this.availableSku = availableSku;
    },
  },
};
</script>

<style scoped>
.on{
  display: inline-block;
  background: #e93b3d;
  color:#fff;
}
.content {
  display: flex;
  flex-direction: column;
  background-color: #f4f4f4;
  box-sizing: border-box;
}
.swiperimg {
  width: 100%;
  height: 750rpx;
}
.swiper-item {
  width: 100%;
  height: 750rpx;
}
.uni-padding-wrap {
  width: 100%;
  height: 750rpx;
}
.page-section,
.swiper {
  width: 100%;
  height: 750rpx;
}
.page-section-spacing {
  width: 100%;
  height: 750rpx;
}

.content .banner {
  width: 100%;
  height: 750rpx;
}
.content .title {
  background-color: #fff;
  padding: 30rpx 30rpx 0 30rpx;
}

.title .tit-wrap {
  line-height: 40rpx;
  padding-right: 104rpx;
  position: relative;
}
.tit-wrap .prod-tit {
  font-size: 32rpx;
  color: #333;
  padding-right: 20rpx;
}
.tit-wrap .col {
  position: absolute;
  top: 0;
  right: 0;
  width: 80rpx;
  color: #666;
  font-size: 20rpx;
  padding-left: 20rpx;
  text-align: center;
}
.col > img {
  display: block;
  margin: auto;
  width: 40rpx;
  height: 40rpx;
  /* background-color: red; */
  color: red;
}

.title .sales-p {
  background: #fff;
  line-height: 40rpx;
  color: #999;
  font-size: 24rpx;
  margin-top: 6rpx;
  margin-right: 104rpx;
}
.title .prod-price {
  font-size: 30rpx;
  height: 100rpx;
  line-height: 100rpx;
}
.prod-price .price {
  color: #eb2444;
  font-size: 24rpx;
  font-weight: 600;
  margin-right: 50rpx;
}
.price .price_num {
  font-size: 46rpx;
  font-weight: 400;
}

.prod-price .sales {
  color: #999;
}

.content .sku {
  width: 100%;
  height: 88rpx;
  margin-top: 20rpx;
  background-color: #fff;
  line-height: 48rpx;
}
.sku .sku_inset {
  margin: 20rpx;
  display: flex;
  width: 100%;
}
.sku_inset .sku_kit {
  width: 60rpx;
  height: 48rpx;
  font-size: 22rpx;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.sku_inset .sku_con {
  width: calc(100% - 40rpx - 96rpx - 20rpx - 10rpx);
  height: 48rpx;
  font-size: 28rpx;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.sku_inset .sku_more {
  width: 60rpx;
  height: 48rpx;
  font-size: 40rpx;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}
.title .cmt-wrap {
  margin-top: 20rpx;

  position: relative;
  line-height: 48rpx;
  background-color: #fff !important;
}
.cmt-wrap .cmt-tit {
  font-size: 32rpx;
  position: relative;
  border-bottom: 1px solid #ddd;
  padding: 20rpx;
  background-color: #fff;
  box-sizing: border-box;
  margin-top: 10rpx;

}
.cmt-tit .cmt-t {
  width: 300rpx;
}
.cmt-good {
  color: #eb2444;
  font-size: 24rpx;
}
.cmt-tit .cmt-count {
  position: absolute;
  right: 20rpx;
  top: 20rpx;
  font-size: 24rpx;
  color: #666;
}
.cmt-count .cmt-more {
  width: 20rpx;
  height: 20rpx;
  border-top: 2rpx solid #999;
  border-right: 2rpx solid #999;
  transform: rotate(45deg);
  margin-left: 10rpx;
  display: inline-block;
}
.cmt-wrap .cmt-cont {
  padding: 0 20rpx;
    background-color: #fff;
  box-sizing: border-box;
  margin-top: 10rpx;
}
.cmt-cont .cmt-tag {
  position: relative;
  padding: 14px 3px 0 0;
  margin: 0;
  
}
.cmt-tag > span {
  margin: 0 10rpx 20rpx 0;
  background: #fdf0f0;
  display: inline-block;
  padding: 0 10rpx;
  height: 50rpx;
  border-radius: 6rpx;
  line-height: 50rpx;
  font-size: 24rpx;
  font-family: -apple-system, Helvetica, sans-serif;
  color: #666;
  margin-right: 44rpx;
}

.content .detail {
  width: 100%;
  background: #fff;
  margin-top: 20rpx;
  position: relative;
  line-height: 48rpx;
}
.detail > div img {
  width: 100rpx !important;
  height: auto !important;
}

.content .footerPin {
  height: 98rpx;
}
.content .footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: row nowrap;
  height: 98rpx;
  z-index: 999;
  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.05);
}
.footer .onebtn {
  width: 124rpx;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-content: center;
  align-items: center;
  flex-grow: 0;
  flex-shrink: 0;
  font-size: 20rpx;
  background-color: #fff;
  color: #666;
  border-right: 1px solid #ccc;
}
.onebtn img {
  width: 50rpx;
  height: 50rpx;
  background-color: #ddd;
  margin-top: 15rpx;
}
.footer .twobtn {
  width: 124rpx;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-content: center;
  align-items: center;
  flex-grow: 0;
  flex-shrink: 0;
  font-size: 20rpx;
  background-color: #fff;
}
.twobtn img {
  width: 50rpx;
  height: 50rpx;
  background-color: #ddd;
  margin-top: 15rpx;
}
.footer .threebtn {
  width: 251.2rpx;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 29rpx;
  color: #fff;
  background-color: #666;
}
.footer .fourbtn {
  width: 251.2rpx;
  height: 100%;
  background-color: #eb2444;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 29rpx;
  color: #fff;
}
.cmt-popup {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 998;
  background-color: #fff;
  padding-bottom: 98rpx;
}
.cmt-tit {
  font-size: 32rpx;
  position: relative;
  border-bottom: 1px solid #ddd;
  padding: 20rpx;
}
.cmt-t {
  width: 300rpx;
}
.cmt-good {
  color: #eb2444;
  font-size: 24rpx;
}
.close {
  color: #aaa;
  border-radius: 12px;
  line-height: 20px;
  text-align: center;
  height: 20px;
  width: 20px;
  font-size: 30px;
  padding: 1px;
  top: 24px;
  right: 44px;
  position: absolute;
}
.cmt-popup .cmt-cont {
  height: calc(100% - 80rpx);
  overflow: auto;
}
.cmt-cont {
  padding: 0 20rpx;
}
.cmt-tag {
  position: relative;
  padding: 14px 3px 0 0;
  margin: 0;
}

.buycar {  
  width: 100%;
  height: 750rpx;
  background-color: #fff;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000000;
  color: #e93b3d;
  box-sizing: border-box;
}
.buycar .skuCard {
  width: 100%;
  height: 160rpx;
}

.skuCard .shopPrev {
  position: absolute;
  width: 180rpx;
  height: 180rpx;
  background-color: #fff;
  top: 20rpx;
  left: 20rpx;
  z-index: 11111;
}

.skuCard .skuPrice {
  width: 530rpx;
  height: 145rpx;
  margin-left: 222rpx;
}
.skuPrice p:nth-child(1) {
  display: inline-block;
  margin-top: 33rpx;
  color: red;
  font-size: 20rpx;
}
.skuPrice p:nth-child(1) > span {
  font-size: 32rpx;
  margin-left: 5rpx;
  margin-right: 5rpx;
}
.skuPrice p:nth-child(2) {
  margin-top: 39rpx;
}
.skuPrice p:nth-child(2) > span {
  margin-top: 39rpx;
}
.skuCard .closeDiv {
  position: absolute;
  width: 44rpx;
  height: 44rpx;
  font-size: 44rpx;
  right: 0;
  top: 0;
  color: #999;
}

.buycar .skuCount {
  width: 100%;
  height: 88rpx;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  padding: 60rpx 20rpx 26rpx;
  box-sizing: border-box;
  font-size: 24rpx;
  line-height: 60rpx;
}
.skuCount > span {
  color: #999;
  line-height: 31px;
  height: 31px;
  width: 100rpx;
}
.skuCount > p {
  line-height: 60rpx;
  box-sizing: border-box;
}
.skuCount > p > span:nth-child(1) {
  display: inline-block;
  color: #999;
  width: 60rpx;
  height: 60rpx;
  line-height: 60rpx;
  background: #f7f7f7;
  text-align: center;
  font-size: 50rpx;
}
.skuCount > p > span:nth-child(2) {
  display: inline-block;
  width: 90rpx;
  height: 60rpx;
  background: #f7f7f7;
  text-align: center;
  margin-left: 2rpx;
  line-height: 80rpx;
  margin-right: 2rpx;
  font-size: 27rpx;
  
  color:#000;
}
.skuCount > p > span:nth-child(3) {
  display: inline-block;
  width: 60rpx;
  font-size: 50rpx;
  color: #999;
  height: 60rpx;
  line-height: 60rpx;
  background: #f7f7f7;
  text-align: center;
}

.buycar .skuAddbuycar {
  display: flex;
  width: 100%;
  height: 98rpx;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.skuAddbuycar span:nth-child(1) {
  display: inline-block;
  width: 50%;
  height: 98rpx;
  text-align: center;
  line-height: 98rpx;
  background: #584e61;
  color: white;
}
.skuAddbuycar span:nth-child(2) {
  display: inline-block;
  width: 50%;
  color: white;
  height: 98rpx;
  text-align: center;
  line-height: 98rpx;
  background-color: #eb2444;
}

.buycar .goSku {
  min-height: 660rpx;
  overflow: auto;
}
.goSku .skuList {
  
  width: 100%;
  overflow: auto;
  box-sizing: border-box;
  margin-top: 50rpx;
  padding-left: 20rpx;
}

/* sku */


 .sku-item p{
    color: #999;
    font-size: 26rpx;
  }
 .sku-item div {
    display: flex;
    align-items: center;
  }
 .sku-item button {
    width: 160rpx;
    margin: 10rpx;
    font-size: 28rpx;
    color: #333;
    line-height: 1.5;
    padding: 10rpx;
  }
 .sku-item button.active {
    background: red;
    color: #fff;
  }
 .sku-item button.disable {
    border: 1px dashed #ccc;
  }

</style>